<template>
  <div>
    <el-container :class="{whitebgc:isShow}">
      <el-header class="my-header">
        <Header />
      </el-header>
      <el-container class="my-content" :class="{'article-content':isShow}">
        <el-main :class="{whitebgc:isShow,'article-main':isShow}" class="my-main">
          <router-view />
        </el-main>
        <Sider v-if="!isArchive" />
        <ArchiveBar v-else />
      </el-container>
      <Footer />
    </el-container>
  </div>
</template>

<script>
import Header from './Header'
import Sider from './Sider'
import Footer from './Footer'
import ArchiveBar from '@/views/archive/ArchiveBar'
export default {
  data () {
    return {}
  },
  components: {
    Header,
    Sider,
    Footer,
    ArchiveBar
  },
  computed: {
    isArchive () {
      if (this.$route.path.includes('/archive')) {
        return true
      } else {
        return false
      }
    },
    isShow () {
      if (this.$route.path.includes('/article/byId')) {
        return true
      } else return false
    }
  }
}
</script>

<style>
.el-header {
  padding: 0;
  background-color: #ffffff;
  color: #909399;
  text-align: center;
  line-height: 60px;
}
.my-header {
  text-align: center;
  background-color: #fff;
  position: fixed;
  padding: 0;
  z-index: 1024;
  min-width: 100%;
  box-shadow: 0 2px 3px hsla(0, 0%, 7%, 0.1), 0 0 0 1px hsla(0, 0%, 7%, 0.1);
}
.el-main {
  color: #333;
  text-align: center;
  line-height: 160px;
}

body > .el-container {
  margin-bottom: 40px;
}
.my-content {
  margin: 75px 15% 30px 25%;
}
.my-main {
  margin: 0 2%;
  background-color: #f5f5f5;
  padding: 0!important;
  max-width: 60%;
}
.whitebgc {
  background-color: #fff;
}
.article-content{
  margin-left: 15%;
}
.article-main{
  max-width: 100%;
}
</style>
